<template>
  <div class="use-pagination" :style="pagePosition">
    <a-pagination :total="total"
                  :page-size="pageSize"
                  :current="current"
                  :page-size-options="sizeOptions"
                  :size="size"
                  :show-total="(totals:number) => `共 ${totals} 条数据`"
                  @change="onChange"/>
  </div>
</template>

<script setup lang="ts">
import {computed} from "vue";

const props = defineProps({
  size:{type:String,default:'middle'},
  total:{type:Number,default:0},
  current:{type:Number,default:1},
  pageSize:{type:Number,default:15},
  position:{type:String,default:'left',
    validator(value:string) {
      // The value must match one of these strings
      return ['left', 'center', 'right'].includes(value)
    }}
})
const pagePosition = computed(()=>{
  let justify:string
  switch (props.position){
    case 'center':
      justify = 'center';
      break;
    case 'right':
      justify = 'flex-end'
          break;
    default:
      justify = 'flex-start'
  }
  return {justifyContent:justify}
})
//根据分页大小设置 分页大小数值
const sizeOptions = computed(()=>{
  let size:string[]=[]
  for (let i=1;i<5;i++){
    size.push(`${props.pageSize*i}`)
  }
  size.push('100')
  return size
})

const emit = defineEmits(['update:current','update:pageSize'])
const onChange = (page:number, pageSize:number)=>{
  emit('update:current',page)
  emit('update:pageSize',pageSize)
}
</script>

<style scoped>
  .use-pagination {
    padding-top: var(--space);
    display: flex;
  }
</style>